<template>
  <div class="image-container">
    <q-img :src="src" :ratio="1"
       style="max-width: 300px; height: 200px;"
       fit="fill"
    >
    </q-img>
    <div class="content">
      <q-btn color="black" class="full-width" label="Learn more" rounded />
    </div>
  </div>

</template>

<script setup lang='ts' name="aplusmax-button-img">
import {defineProps, defineEmits, defineExpose} from 'vue'

const props = defineProps({
  src: {
    required: true,
    type: String
  }
})


const emit = defineEmits([])

defineExpose({})
</script>

<style scoped lang='less'>
:deep(.q-img__image){
  border-radius: 10px;
}


.image-container {
  text-align: center;
  position: relative;
  width: 100%; /* Adjust as needed */
  height: auto; /* Adjust as needed */
  padding: 50px 40px 30px 50px;
}

.image-container .q-img__image {
  width: 100%;
  height: auto;
  display: block;
}

.content {
  //top: 50%;
  //background: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
  margin-top: 10px;
  width: 80%;
  display: inline-block;
}

.text {
  margin: 10px 0; /* Adjust spacing as needed */
  white-space:nowrap;
}

.q-btn{
  height: 30px;
}
//button {
//  padding: 10px 20px; /* Adjust button padding as needed */
//  margin-top: 10px; /* Adjust spacing as needed */
//}
//.button {
//  padding: 10px;
//  color: #fff;
//  cursor: pointer;
//  border-radius: 30px; /* 设置按钮圆角 */
//  background-color: #000000; /* 设置背景颜色 */
//  border: 2px solid #000000;
//  width: 100%;
//}

//.button {
//  position: absolute;
//  top: 70%; /* 上边缘位于容器的50%位置 */
//  left: 50%; /* 左边缘位于容器的50%位置 */
//  transform: translate(-50%, -50%); /* 将按钮中心对齐到容器的中心 */
//  padding: 10px;
//  color: #fff;
//  cursor: pointer;
//
//  width: 50%;
//}

</style>